<template>
  <div class="follow-list">
    <h2>Your Follow List</h2>
    <p><strong>Followers:</strong></p>
    <ul>
      <li v-for="follower in followers" :key="follower">
        {{ follower }}
        <button @click="fetchUserInfo(follower)">查看信息</button>
      </li>
    </ul>
    <p><strong>Following:</strong></p>
    <ul>
      <li v-for="following in followings" :key="following">
        {{ following }}
        <button @click="fetchUserInfo(following)">查看信息</button>
      </li>
    </ul>

    <!-- 模态框 -->
    <div v-if="showModal" class="modal">
      <div class="modal-content">
        <span class="close" @click="closeModal">&times;</span>
        <h3>用户信息</h3>
        <p><strong>用户名:</strong> {{ userInfo.username }}</p>
        <p><strong>角色:</strong> {{ userInfo.role }}</p>
        <p><strong>注册时间:</strong> {{ userInfo.enroll_time }}</p>
        <p><strong>关注数:</strong> {{ userInfo.following.length }}</p>
        <p><strong>粉丝数:</strong> {{ userInfo.followers.length }}</p>
        <p><strong>收藏夹:</strong> {{ userInfo.favorites ? userInfo.favorites.join(', ') : '无' }}</p>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      followers: [],
      followings: [],
      showModal: false,
      userInfo: {}
    };
  },
  mounted() {
    this.fetchFollowData();
  },
  methods: {
    async fetchFollowData() {
      try {
        const response = await axios.get('/backend/api/account/follow_data/', {
          withCredentials: true // 启用跨域请求时发送 Cookie
        });
        this.followers = response.data.followers;
        this.followings = response.data.following;
      } catch (error) {
        console.error('Failed to fetch follow data:', error);
      }
    },
    async fetchUserInfo(userId) {
      try {
        const response = await axios.get(`/backend/api/account/profile/${userId}/`, {
          withCredentials: true // 启用跨域请求时发送 Cookie
        });
        this.userInfo = response.data; // 获取用户信息
        this.showModal = true; // 显示模态框
      } catch (error) {
        console.error('Failed to fetch user info:', error);
      }
    },
    closeModal() {
      this.showModal = false; // 关闭模态框
      this.userInfo = {}; // 清空用户信息
    }
  }
};
</script>

<style scoped>
.follow-list {
  padding: 20px;
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  height:90vh;
  width:100vh;
}

h2 {
  color: black;
}

button {
  margin-left: 10px;
  background-color: #4a90e2;
  color: white;
  border: none;
  border-radius: 5px;
  padding: 0;
  cursor: pointer;
  font-size: 14px;
  height: 5vh;
  width:10vh;
}

button:hover {
  background-color: #357ab8; /* 悬停时背景色 */
}

/* 模态框样式 */
.modal {
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* 半透明背景 */
}

.modal-content {
  background-color: #fff;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}
</style>